import React from 'react';
import { SystemStatus } from '../types';
import { Cpu, HardDrive, Activity, Zap, AlertTriangle } from 'lucide-react';

interface SystemStatusPanelProps {
  systemStatus: SystemStatus;
}

export const SystemStatusPanel: React.FC<SystemStatusPanelProps> = ({ systemStatus }) => {
  const getHealthColor = () => {
    const criticalRatio = systemStatus.criticalServers / systemStatus.totalServers;
    if (criticalRatio > 0.2) return 'health-critical';
    if (systemStatus.warningServers > 0) return 'health-warning';
    return 'health-healthy';
  };

  const getNetworkBalanceColor = () => {
    return systemStatus.networkBalance === 'balanced' ? 'text-success-green' : 'text-warning-yellow';
  };

  return (
    <div className="glass-effect rounded-lg p-4 h-full flex flex-col">
      {/* 标题区域 */}
      <div className="flex items-center justify-between mb-3 flex-shrink-0">
        <h2 className="text-lg font-semibold text-text-primary">系统状态监控</h2>
        <div className={`w-3 h-3 rounded-full health-indicator ${getHealthColor()}`} />
      </div>

      {/* 核心指标区域 - 紧凑布局 */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-3 flex-shrink-0">
        <div className="bg-secondary-bg/20 rounded-lg p-3 text-center">
          <div className="flex items-center justify-center gap-1 mb-1">
            <Cpu size={14} className="text-accent-blue" />
            <span className="text-xs text-text-secondary">CPU</span>
          </div>
          <div className="text-lg font-bold text-text-primary">
            {systemStatus.avgCpu.toFixed(1)}%
          </div>
        </div>

        <div className="bg-secondary-bg/20 rounded-lg p-3 text-center">
          <div className="flex items-center justify-center gap-1 mb-1">
            <HardDrive size={14} className="text-accent-blue" />
            <span className="text-xs text-text-secondary">内存</span>
          </div>
          <div className="text-lg font-bold text-text-primary">
            {systemStatus.avgMemory.toFixed(1)}%
          </div>
        </div>

        <div className="bg-secondary-bg/20 rounded-lg p-3 text-center">
          <div className="flex items-center justify-center gap-1 mb-1">
            <Activity size={14} className="text-accent-blue" />
            <span className="text-xs text-text-secondary">负载</span>
          </div>
          <div className="text-lg font-bold text-text-primary">
            {systemStatus.avgLoad.toFixed(2)}
          </div>
        </div>

        <div className="bg-secondary-bg/20 rounded-lg p-3 text-center">
          <div className="flex items-center justify-center gap-1 mb-1">
            <Zap size={14} className="text-accent-blue" />
            <span className="text-xs text-text-secondary">健康度</span>
          </div>
          <div className="text-lg font-bold text-text-primary">
            {((systemStatus.healthyServers / systemStatus.totalServers) * 100).toFixed(0)}%
          </div>
        </div>
      </div>

      {/* 详细状态区域 - 单行布局确保显示 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 flex-1 min-h-0">
        <div className="bg-secondary-bg/20 rounded-lg p-3 border border-border-color/50">
          <h3 className="text-xs font-medium text-text-secondary mb-2 flex items-center gap-1">
            <AlertTriangle size={12} />
            服务器状态分布
          </h3>
          <div className="space-y-1.5">
            <div className="flex justify-between items-center text-xs">
              <span className="text-text-secondary">健康</span>
              <span className="text-success-green font-medium">
                {systemStatus.healthyServers} / {systemStatus.totalServers}
              </span>
            </div>
            <div className="flex justify-between items-center text-xs">
              <span className="text-text-secondary">警告</span>
              <span className="text-warning-yellow font-medium">
                {systemStatus.warningServers}
              </span>
            </div>
            <div className="flex justify-between items-center text-xs">
              <span className="text-text-secondary">严重</span>
              <span className="text-error-red font-medium">
                {systemStatus.criticalServers}
              </span>
            </div>
          </div>
        </div>

        <div className="bg-secondary-bg/20 rounded-lg p-3 border border-border-color/50">
          <h3 className="text-xs font-medium text-text-secondary mb-2">负载均衡状态</h3>
          <div className="space-y-1.5">
            <div className="flex justify-between items-center text-xs">
              <span className="text-text-secondary">状态</span>
              <span className={`font-medium ${getNetworkBalanceColor()}`}>
                {systemStatus.networkBalance === 'balanced' ? '均衡' : '倾斜'}
              </span>
            </div>
            <div className="flex justify-between items-center text-xs">
              <span className="text-text-secondary">流量比</span>
              <span className="text-text-primary font-medium">
                {systemStatus.networkRatio.toFixed(1)}:1
              </span>
            </div>
            <div className="w-full bg-gray-700 rounded-full h-1.5 mt-2">
              <div
                className={`h-1.5 rounded-full transition-all ${
                  systemStatus.networkBalance === 'balanced'
                    ? 'bg-success-green'
                    : 'bg-warning-yellow'
                }`}
                style={{
                  width: `${Math.min(systemStatus.networkRatio / 5 * 100, 100)}%`
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};